<template>
  <div class="base-container">
    <toolBar
      :tableColumnConfig="tableColumnConfig"
      :checkedRow="checkedRow"
      :dataList="dataList"
      :toolBarAddBTN="toolBarAddBTN"
      @edit="openEdit"
      @add="openAdd"
      @del="del"
    ></toolBar>
    <el-table
      :data="cptList"
      row-key="id"
      border
      style="width: 100%"
      default-expand-all
      :tree-props="{ children: 'child', hasChildren: 'hasChildren' }"
    >
      <template v-for="item in cptColumn">
        <el-table-column
          v-if="!excludeHandle(item.prop)"
          v-show="item.show"
          :key="item.id"
          :prop="item.prop"
          :label="item.label"
        />
        <el-table-column
          v-show="item.show"
          v-if="excludeHandle(item.prop)"
          :key="item.id"
          :label="item.label"
        >
          <template slot-scope="scope">
            <i :class="scope.row[item.prop]" />
          </template>
        </el-table-column>
      </template>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            icon="el-icon-edit"
            @click="openEdit(scope.row)"
          />
          <el-button
            size="mini"
            icon="el-icon-delete"
            @click="del(scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
    <detail
      :parentOption="parentOption"
      :selectGroup="selectGroup"
      ref="detail"
      :dialog-title="dialogTitle"
      @editHandle="edit"
      @addHandle="add"
    />
  </div>
</template>

<script>
import toolBar from "@/components/common/toolBar";
import detail from "./component/detail";
import curd from "@/mixins/curd";
import { sendJSON } from "@/utils/request";

const CURD = new curd({
  url: "/sys/menu/"
});
export default {
  components: { toolBar, detail },
  mixins: [CURD],
  data() {
    return {
      // 列表配置
      tableColumnConfig: [
        { id: 1, label: "菜单名称", prop: "name", show: true },
        { id: 2, label: "图标", prop: "icon", show: true },
        { id: 3, label: "类型", prop: "type", show: true },
        { id: 4, label: "状态", prop: "status", show: true },
        { id: 5, label: "路由", prop: "page", show: true },
        { id: 6, label: "创建时间", prop: "created", show: true },
        { id: 7, label: "更新时间", prop: "updated", show: true }
      ],
      exclude: ["icon"],
      // 所有菜单数组
      parentOption: [],
      // 所有接口数组
      selectGroup: []
    };
  },
  methods: {
    // 刷新-API
    initData() {
      this.tableLoading = true;
      let data = JSON.parse(JSON.stringify(this.query)),
        toolQuery = JSON.parse(JSON.stringify(this.toolQuery));
      // page - 页码
      // size - 页目数
      Object.assign(data, toolQuery);
      sendJSON(this.initUrl, data).then(res => {
        const { list, totalRow } = res.data;
        this.dataList = list;
        this.query.totalRow = totalRow;
        this.tableLoading = false;
      });
      // 为详情框做的操作
      sendJSON("/sys/action/page", { size: 99999 }).then(res => {
        console.log("数据是",res)
        this.selectGroup = res.data.list;
      });
      sendJSON("/sys/menu/page", { size: 99999999 }).then(res => {
        this.parentOption = res.data.list;
      });
    },
    excludeHandle(key) {
      return this.exclude.some(item => item == key);
    },
    // 自定义打开编辑方式
    // 打开编辑弹窗
    openEdit(obj) {
      this.$refs["detail"].isAdd = false;
      sendJSON("/sys/menu/get", { uid: obj.uid }).then(res => {
        const { data } = res;
        delete data.child;
        this.$refs["detail"].formData = data;
        this.dialogTitle = `${data.name} --- 类型是${
          data.type == 1 ? "菜单" : "按钮"
        }`;
        this.$refs["detail"].dialogVisible = true;
      });
    },
    // 打开弹窗 --- 新增
    openAdd() {
      this.$refs.detail.dialogVisible = true;
      this.dialogTitle = "新增";
      this.$refs["detail"].isAdd = true;
      this.$refs["detail"].formData = {
        type: 1,
        name: "",
        sort: 99,
        pUid: null,
        icon: null,
        componentName: null,
        componentPath: null,
        outerLink: false,
        cache: false,
        visible: true,
        actionUid: []
      };
    }
  },
  computed: {
    cptList() {
      function eachData(data) {
        data.forEach(item => {
          item.type == 1 ? (item.type = "菜单") : (item.type = "按钮");
          item.status == 0 ? (item.status = "关闭") : (item.status = "开启");
          if (item.child.length) {
            eachData(item.child);
          }
        });
      }
      const result = JSON.parse(JSON.stringify(this.dataList));
      eachData(result);
      return result;
    }
  }
};
</script>

<style lang="scss">
@import "@/styles/base/index.scss";
</style>
